<template>
  <div class="mainV">
    <div class="mainT">欢迎来到智慧医疗会诊系统</div>
    <img class="mainBg" src="@/assets/mb.png" alt="">
    <!-- 身份证号登录 -->
    <div class="mainVs" v-if="loginType && idCardType">
      <el-form :model="idCardForm" ref="idCardForm" size="small" :inline="true"
        style="display: flex;flex-direction: column;align-items: center;" label-width="80px">
        <el-form-item label="身份证号" required>
          <el-input v-model="idCardForm.idCard" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="密码" required>
          <el-input type="password" v-model="idCardForm.password" placeholder="请输入密码" />
        </el-form-item>
        <div class="btsv">
          <div class="registTypeBtn">
            <p @click="idCardType = false">手机号登录</p>
          </div>
          <div class="registTypeBtn">
            <p @click="passwordType = true; loginType = false">忘记密码？</p>
          </div>
          <div class="registTypeBtn">
            <p @click="loginType = false">去注册</p>
          </div>
        </div>
        <el-form-item>
          <el-button type="success" @click="loginBtnByidcard"
            style="width: 220px;margin-top: 40px;font-size: 18px;">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 手机号登录 -->
    <div class="mainVs" v-if="loginType && !idCardType">
      <el-form :model="loginForm" ref="loginForm" size="small" :inline="true"
        style="display: flex;flex-direction: column;align-items: center;" label-width="80px">
        <el-form-item label="手机号" required>
          <el-input v-model="loginForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <div class="registTypeBtn codeBtn">
          <p style="margin-right: 30px;" @click="sendCode">{{ codeSecend ? `${codeSecend} 秒后重新发送` : '发送验证码' }}</p>
        </div>
        <el-form-item label="验证码" required>
          <el-input v-model="loginForm.code" placeholder="请输入验证码" />
        </el-form-item>
        <div class="btsv">
          <div class="registTypeBtn">
            <p @click="idCardType = true">身份证号登录</p>
          </div>
          <div class="registTypeBtn">
            <p @click="passwordType = true; loginType = false">忘记密码？</p>
          </div>
          <div class="registTypeBtn">
            <p @click="loginType = false">去注册</p>
          </div>
        </div>
        <el-form-item>
          <el-button type="success" @click="loginBtnByphone"
            style="width: 220px;margin-top: 40px;font-size: 18px;">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 修改密码 -->
    <div class="mainVs" v-if="passwordType && !loginType">
      <el-form :model="passwordForm" ref="passwordForm" size="small" :inline="true"
        style="display: flex;flex-direction: column;align-items: center;" label-width="80px">
        <el-form-item label="手机号" required>
          <el-input v-model="passwordForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <div class="registTypeBtn codeBtn">
          <p @click="sendCode">{{ codeSecend ? `${codeSecend} 秒后重新发送` : '发送验证码' }}</p>
        </div>
        <el-form-item label="验证码" required>
          <el-input v-model="passwordForm.code" placeholder="请输入验证码" />
        </el-form-item>
        <el-form-item label="密码" required>
          <el-input type="password" v-model="passwordForm.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码" required>
          <el-input type="password" v-model="passwordForm.checkPass" placeholder="请确认密码" />
        </el-form-item>
        <div class="registTypeBtn">
          <p @click="loginType = true; passwordType = false">去登录</p>
        </div>
        <el-form-item>
          <el-button type="success" @click="passwordBtn"
            style="width: 220px;margin-top: 40px;font-size: 18px;">修改密码</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 注册 -->
    <div class="mainVs" v-if="!passwordType && !loginType">
      <el-form :model="registForm" ref="registForm" size="small" :inline="true"
        style="display: flex;flex-direction: column;align-items: center;" label-width="80px">
        <el-form-item label="姓名" required>
          <el-input v-model="registForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="身份证号" required>
          <el-input v-model="registForm.idCard" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="密码" required>
          <el-input type="password" v-model="registForm.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码" required>
          <el-input type="password" v-model="registForm.checkPass" placeholder="请确认密码" />
        </el-form-item>
        <el-form-item label="手机号" required>
          <el-input v-model="registForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <div class="registTypeBtn codeBtn">
          <p style="margin-right: 30px;" @click="sendCode">{{ codeSecend ? `${codeSecend} 秒后重新发送` : '发送验证码' }}</p>
        </div>
        <el-form-item label="验证码" required>
          <el-input v-model="registForm.code" placeholder="请输入验证码" />
        </el-form-item>
        <div class="registTypeBtn">
          <p style="margin-right: 40px;" @click="loginType = true; passwordType = false">去登录</p>
        </div>
        <el-form-item>
          <el-button type="success" @click="registBtn"
            style="width: 220px;margin-top: 40px;font-size: 18px;">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="remarkT">温馨提示：为确保问诊通讯，请复制链接在手机默认浏览器中打开此页面！</div>
  </div>
</template>

<script>
import { fetchPost, fetchGet } from '@/api/request'
export default {
  data() {
    return {
      loginType: true,
      passwordType: false,
      passwordForm: {},
      idCardType: true,
      idCardForm: {},
      registForm: {
        name: '',
        idCard: '',
        password: '',
        checkPass: '',
        phone: '',
        code: '',
      },
      loginForm: {},
      codeSecend: null,
    }
  },
  methods: {
    sendCode() {
      let phonep = /^1[3-9]\d{9}$/;
      if (this.codeSecend != null) return;
      if (!this.passwordType && !this.loginType && phonep.test(this.registForm.phone)) {  //注册
        this.codeSecendFun(this.registForm.phone);
      } else if (this.loginType && !this.idCardType && phonep.test(this.loginForm.phone)) {  //手机号登录
        this.codeSecendFun(this.loginForm.phone);
      } else if (this.passwordType && !this.loginType && phonep.test(this.passwordForm.phone)) {  //修改密码
        this.codeSecendFun(this.passwordForm.phone);
      }
    },
    codeSecendFun(phone) {
      fetchPost('/wz/user/code', { phone: phone }).then(res => {
        this.$message({
          message: res.message
        });
      })
      this.codeSecend = 60
      let timer = setInterval(() => {
        this.codeSecend--;
        if (this.codeSecend <= 0) {
          clearInterval(timer);
          this.codeSecend = null;
        }
      }, 1000)
    },
    passwordBtn() {
      this.$refs['passwordForm'].validate((valid) => {
        if (valid) {
          fetchGet('/agri/sgNctjFrontUser/register', this.passwordForm).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '修改成功'
              });
              this.passwordType = false
            } else {
              this.$message({
                type: 'error',
                message: res.message
              });
            }

          })
        }
      });
    },
    // 手机号登录
    loginBtnByphone() {
      console.log(this.loginForm)
      let phonep = /^1[3-9]\d{9}$/;
      if (!phonep.test(this.loginForm.phone)) {
        this.$message({
          type: 'error',
          message: '请输入正确的手机号！'
        });
        return;
      } else if (!this.loginForm.code) {
        this.$message({
          type: 'error',
          message: '请输入验证码！'
        });
      }
      fetchPost('/wz/user/login', this.loginForm).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '登录成功'
          });
          localStorage.setItem("token", res.result.token);
          localStorage.setItem("wzPatientInfo", JSON.stringify(res.result.wzPatientInfo));
          this.$router.push('/search');
        } else {
          this.$message({
            type: 'error',
            message: res.message
          });
        }
      })
    },
    // 身份证登录
    loginBtnByidcard() {
      console.log(this.idCardForm)
      let idCardp = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
      if (!idCardp.test(this.idCardForm.idCard)) {
        this.$message({
          type: 'error',
          message: '请输入正确的身份证号！'
        });
        return;
      } else if (!this.idCardForm.password) {
        this.$message({
          type: 'error',
          message: '请输入密码！'
        });
      }
      fetchPost('/wz/user/login', this.idCardForm).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '登录成功'
          });
          localStorage.setItem("token", res.result.token);
          localStorage.setItem("wzPatientInfo", JSON.stringify(res.result.wzPatientInfo));
          this.$router.push('/search');
        } else {
          this.$message({
            type: 'error',
            message: res.message
          });
        }
      })
    },
    //注册
    registBtn() {
      console.log(this.registForm)
      let idCardp = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
      let phonep = /^1[3-9]\d{9}$/;
      if (!this.registForm.name) {
        this.$message({
          type: 'error',
          message: '请输入姓名！'
        });
        return;
      } else if (!idCardp.test(this.registForm.idCard)) {
        this.$message({
          type: 'error',
          message: '请输入正确的身份证号！'
        });
        return;
      } else if (!phonep.test(this.registForm.phone)) {
        this.$message({
          type: 'error',
          message: '请输入正确的手机号！'
        });
        return;
      } else if (this.registForm.password.length < 5) {
        this.$message({
          type: 'error',
          message: '请输入六位数以上的密码！'
        });
        return;
      } else if (this.registForm.checkPass.length < 5 || this.registForm.checkPass !== this.registForm.password) {
        this.$message({
          type: 'error',
          message: '请输入保持两次密码输入一致！'
        });
        return;
      } else if (!this.registForm.code) {
        this.$message({
          type: 'error',
          message: '请输入手机验证码！'
        });
        return;
      }
      fetchPost('/wz/user/register', this.registForm).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '注册成功'
          });
          this.registForm = {
            name: '',
            idCard: '',
            password: '',
            checkPass: '',
            phone: '',
            code: '',
          }
          this.loginType = false
        } else {
          this.$message({
            type: 'error',
            message: res.message
          });
        }

      })
    },
    //修改密码
    passwordBtn() {
      console.log(this.passwordForm)
      let phonep = /^1[3-9]\d{9}$/;
      if (!phonep.test(this.passwordForm.phone)) {
        this.$message({
          type: 'error',
          message: '请输入正确的手机号！'
        });
        return;
      } else if (!this.passwordForm.code) {
        this.$message({
          type: 'error',
          message: '请输入验证码！'
        });
      } else if (this.passwordForm.password.length < 5) {
        this.$message({
          type: 'error',
          message: '请输入六位数以上的密码！'
        });
        return;
      } else if (this.passwordForm.checkPass.length < 5 || this.passwordForm.checkPass !== this.passwordForm.password) {
        this.$message({
          type: 'error',
          message: '请输入保持两次密码输入一致！'
        });
        return;
      }
      fetchPost('/wz/user/retrieve', this.passwordForm).then(res => {
        if (res.code == 200) {
          this.loginType = true;
          this.idCardType = false;
          this.passwordType = false;
          this.passwordForm = {};
        }
        this.$message({
          message: res.message
        });
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.mainV {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  
  flex-direction: column;


  .mainBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: .2;
    z-index: 1;
  }

  .btsv {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .mainT {
    width: 80%;
    color: #038069;
    font-size: 33px;
    margin-bottom: 50px;
    font-weight: bold;
    text-align: center;
  }

  .mainVs,
  .mainT,
  .remarkT {
    position: relative;
    width: calc(100% - 80px);
    z-index: 2;
  }

  .registTypeBtn {
    font-size: 16px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    p {
      color: #409EFF;
    }
  }

  .codeBtn {
    margin: -10px 20px 10px 0;
  }
}

.remarkT {
  font-weight: bold;
  color: #F56C6C;
  text-align: center;
  margin-top: 50px;
  z-index: 3;
}
</style>